<template>
	<div class="wrapper">
		<div>
			<slot></slot>
			<h3 style="text-align: center;">
				{{
					isHasMore ?
						isPullingUp ? '数据拼命加载中...' : '数据加载完毕'
						: text || '没有数据'
				}}
			</h3>
		</div>
	</div>
</template>

<script lang="ts" setup>
// 引入bs
import { ref, defineEmits, defineProps } from 'vue'
import BScroll from '@better-scroll/core'
import ObserveDOM from '@better-scroll/observe-dom'
import Pullup from '@better-scroll/pull-up'
import PullDown from '@better-scroll/pull-down'
import { onMounted } from 'vue';
BScroll.use(PullDown)
BScroll.use(Pullup)
BScroll.use(ObserveDOM)

// 开关  切换效果
const isPullingUp = ref(false)
// 接受事件
const emit = defineEmits(['pullUp', 'pullDown'])
// 接受属性
const props = defineProps(['isHasMore', 'text'])
// 初始化函数 
const initBScroll = () => {
	// 开启BS 
	const bs = new BScroll('.wrapper', {
		observeDOM: true, // 开启 observe-dom 插件
		pullUpLoad: {
			threshold: 100
		}, //开启上拉加载
		pullDownRefresh: true, //开启下拉刷新
		click: true
	})

	// 上拉刷新 函数 
	bs.on('pullingUp', async () => {
		// 判断是否有更多数据
		if (props.isHasMore) {
			// 切换开关
			isPullingUp.value = true
			// 等待事件函数结果 
			await emit('pullUp')
			//告诉BS 完成本次上拉
			bs.finishPullUp()
			// 切换开关
			isPullingUp.value = false
		}
	})

	// 下拉刷新
	bs.on('pullingDown', async () => {
		// 等待事件函数结果
		await emit('pullDown')
		// 	//告诉BS 完成本次下拉 
		bs.finishPullDown()
	})
}

// 生命周期 
onMounted(() => {
	// 初始化
	initBScroll()
})

</script>